<template>
  <div class="min-h-screen bg-gray-50 py-12">
    <div class="max-w-4xl mx-auto px-4">
      <!-- 项目标题 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-800 mb-4">
          Vue 3 Provide/Inject 异步演示项目
        </h1>
        <p class="text-xl text-gray-600 mb-2">
          深入理解 Vue 3 中依赖注入的响应式机制
        </p>
        <p class="text-gray-500">
          通过三个实际案例，学习 provide/inject 在异步场景下的正确用法和常见陷阱
        </p>
      </div>

      <!-- 演示案例卡片 -->
      <div class="grid md:grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- 静态 Provide 演示 -->
        <router-link 
          to="/static-provide"
          class="block bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6 border-l-4 border-yellow-400"
        >
          <div class="flex items-center mb-3">
            <span class="text-2xl mr-3">⚠️</span>
            <h3 class="text-lg font-semibold text-gray-800">静态 Provide</h3>
          </div>
          <p class="text-gray-600 text-sm mb-3">
            展示普通变量的 provide/inject 非响应式行为
          </p>
          <div class="text-xs text-yellow-700 bg-yellow-50 p-2 rounded">
            <strong>问题：</strong> 父组件修改变量后，子组件不会更新
          </div>
        </router-link>

        <!-- 响应式 Provide 演示 -->
        <router-link 
          to="/reactive-provide"
          class="block bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6 border-l-4 border-green-400"
        >
          <div class="flex items-center mb-3">
            <span class="text-2xl mr-3">✅</span>
            <h3 class="text-lg font-semibold text-gray-800">响应式 Provide</h3>
          </div>
          <p class="text-gray-600 text-sm mb-3">
            展示使用 ref 的正确响应式实现
          </p>
          <div class="text-xs text-green-700 bg-green-50 p-2 rounded">
            <strong>推荐：</strong> 异步修改后子组件会自动更新
          </div>
        </router-link>

        <!-- 错误异步 Provide 演示 -->
        <router-link 
          to="/async-provide-error"
          class="block bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6 border-l-4 border-red-400"
        >
          <div class="flex items-center mb-3">
            <span class="text-2xl mr-3">❌</span>
            <h3 class="text-lg font-semibold text-gray-800">错误异步 Provide</h3>
          </div>
          <p class="text-gray-600 text-sm mb-3">
            展示异步调用 provide 的错误用法
          </p>
          <div class="text-xs text-red-700 bg-red-50 p-2 rounded">
            <strong>错误：</strong> 在 setup 外部异步调用 provide 无效
          </div>
        </router-link>
      </div>

      <!-- 学习指南 -->
      <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">📚 学习指南</h2>
        <div class="space-y-3 text-gray-600">
          <div class="flex items-start">
            <span class="text-vue-green mr-2 mt-1">1.</span>
            <p>先查看 <strong>静态 Provide 演示</strong>，了解普通变量的局限性</p>
          </div>
          <div class="flex items-start">
            <span class="text-vue-green mr-2 mt-1">2.</span>
            <p>然后学习 <strong>响应式 Provide 演示</strong>，掌握正确的实现方式</p>
          </div>
          <div class="flex items-start">
            <span class="text-vue-green mr-2 mt-1">3.</span>
            <p>最后查看 <strong>错误异步 Provide 演示</strong>，避免常见的错误用法</p>
          </div>
          <div class="flex items-start">
            <span class="text-vue-green mr-2 mt-1">4.</span>
            <p>每个演示都包含详细的控制台日志，帮助理解执行过程</p>
          </div>
        </div>
      </div>

      <!-- 技术要点 -->
      <div class="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
        <h2 class="text-xl font-semibold text-blue-800 mb-4">🔑 核心技术要点</h2>
        <div class="grid md:grid-cols-2 gap-4 text-sm">
          <div>
            <h4 class="font-semibold text-blue-700 mb-2">响应式原理</h4>
            <ul class="space-y-1 text-blue-600">
              <li>• provide 提供普通值 → 非响应式</li>
              <li>• provide 提供 ref/reactive → 响应式</li>
              <li>• inject 自动解包响应式引用</li>
            </ul>
          </div>
          <div>
            <h4 class="font-semibold text-blue-700 mb-2">最佳实践</h4>
            <ul class="space-y-1 text-blue-600">
              <li>• 在 setup 中建立 provide/inject</li>
              <li>• 使用 ref 或 reactive 包装数据</li>
              <li>• 避免在异步回调中调用 provide</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 首页不需要额外的逻辑
</script>

<style scoped>
.text-vue-green {
  color: #42b883;
}
</style>
